<template>
  <div>
    <co-navbar v-model='nav'>
      <co-tab-item id="rest">年假</co-tab-item>
      <co-tab-item id="used">调休</co-tab-item>
    </co-navbar>
    <doughnut-chart :data='{labels, datasets}' :options='{responsive: false, maintainAspectRatio: false}' :width='300' :height='300'></doughnut-chart>
  </div>
</template>
<script>
import DoughnutChart from './DoughnutChart.js';
export default {
  components: {
    DoughnutChart
  },
  data() {
    return {
      nav: 'rest',
      labels: ['已使用', '剩余'],
      datasets: [{
        backgroundColor: ['#ffce56', '#36a2eb'],
        data: [7, 20]
      }]
    };
  }
};
</script>
<style>
  #doughnut-chart {
    margin: 1rem auto;
  }
</style>

